<!DOCTYPE html>
<html>
<head>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<style>

#backgroundFixed {
  will-change: transform;
  position: fixed;
  height: 400px;
  width: 400px;
  z-index: 1;
  background-color: gray;
}

#container {
  position: absolute;
  z-index: 2;
  top: 100px;
  left: 100px;
  width: 960px;
  background-color: green;
  width: 100px;
  height: 4000px;
}

#innerFixed {
  will-change: transform;
  background-color: blue;
  position: fixed;
  top: 150px;
  left: 100px;
  width: 200px;
  height: 100px;
}

#innerScrolling {
  background-color: lime;
  position: absolute;
  left: 100px;
  height: 100px;
  width: 100px;
}

#description {
  position: absolute;
  top: 100px;
  left: 450px;
  width: 300px;
}

#testResults {
  display: none;
}

body {
  margin: 0;
}

</style>

<script>
    if (window.testRunner) {
        testRunner.dumpAsText();
        testRunner.waitUntilDone();
    }

    function runTest()
    {
        if (!window.internals)
            return;

        // Case 1
        document.getElementById('Case1').textContent = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_INVALIDATIONS);

        // Case 2
        internals.startTrackingRepaints(document);
        window.scrollTo(0, 10);
        runAfterLayoutAndPaint(function() {
          document.getElementById('Case2').textContent = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_INVALIDATIONS);
          internals.stopTrackingRepaints(document);

          // Case 3
          internals.startTrackingRepaints(document);
          window.scrollTo(0, 110);
          runAfterLayoutAndPaint(function() {
            document.getElementById('Case3').textContent = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_INVALIDATIONS);
            internals.stopTrackingRepaints(document);

            // Display the test results only after test is done so that it does not affect repaint rect results.
            document.getElementById('testResults').style.display = "block";

            if (window.testRunner)
              testRunner.notifyDone();
          });
        });
    }
</script>
</head>

<body onload="runTest()">
  <div id="description">
    <p>This scenario verifies that the green "container" element and lime
    "innerScrolling" element scroll properly even though there is a blue
    fixed-position element layered in between them.</p>

    <p>The catch is that the squashing requirements should be computed in
    correct paint order, so that the green container does not accidentally
    position itself with respect to the wrong layer and not scroll.</p>
  </div>

  <div id="backgroundFixed"></div>

  <div id="container">
    <div id="innerFixed"></div>
    <div id="innerScrolling"></div>
  </div>

  <div id="testResults">
    CASE 1, original layer tree:
    <pre id="Case1"></pre>

    CASE 2, scrolling y by 10 pixels, both the "container" and "inner" should scroll properly.
    <pre id="Case2"></pre>

    CASE 3, scrolling y further so that "inner" no longer overlaps the fixed-pos layer, then the stacking context of "container" includes the "innerScrolling" layer, and doubles in width:
    <pre id="Case3"></pre>
  </div>
</body>
